/* Algemene stijlen voor de portfolio website */

/* ALLE TEKSTEN 16PX NORMAAL GROOT */
body, p, li, label, span, div, input, textarea, button, h1, h2, h3, h4, h5, h6 {
    font-size: 16px !important;
}

/* Headings vet voor onderscheid */
h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
}

/* Stijl voor de navigatiebalk */
.navbar {
    background-color: #f8f9fa;    /* Achtergrondkleur op lichtgrijs */
    border-bottom: 3px solid #f04c25;   /* Voegt oranje onderrand toe van 3px dik */
}

/* Stijl voor het logo/merk in navigatiebalk */
.navbar-brand {
    color: #f04c25 !important;   /* Maakt de tekst oranje */
    font-weight: bold;   /* Maakt de tekst vetgedrukt */
}

/* Stijl voor actieve navigatielink */
.nav-link.active {
    color: #f04c25 !important;  /* Oranje kleur voor actieve menu-item */
    font-weight: bold;    /* Vetgedrukte tekst voor actieve menu-item */
}

/* Stijl voor primaire knoppen */
.btn-primary {
    background-color: #f04c25;   /* Oranje achtergrond voor knoppen */
    border-color: #f04c25;   /* Oranje rand voor knoppen */
}

/* Stijl voor primaire knoppen bij hover (muis erover) */
.btn-primary:hover {
    background-color: #d43d1a;    /* Donkerder oranje bij muis klikt bij bv=  over mij - meer over mij knop */
    border-color: #d43d1a;  /* Donkerder oranje rand bij muis klikt bij bv=  over mij - meer over mij knop */
}

/* Algemene kaart stijl */
.card {
    border: 1px solid #ddd;   /* Lichtgrijze rand rond kaarten bv= github knop */
    border-radius: 8px;   /* Afgeronde hoeken van 8 pixels */
}

/* BLAUWE TEKSTEN */
h2, h3, h4, h5, .card-title {
    color: #009cab !important;
}

/* MEER RUIMTE TUSSEN TEKSTEN */
p, li, label {
    line-height: 1.6;       /* Meer ruimte tussen regels */
    margin-bottom: 15px;    /* Meer ruimte onder paragrafen */
}

/* Ruimte tussen formulier elementen */
.form-control {
    margin-bottom: 20px;    /* Ruimte onder input velden */
}

/* Extra ruimte tussen formulier groepen */
.mb-3 {
    margin-bottom: 1.5rem !important; /* Meer ruimte tussen formulier velden */
}

/* Ruimte tussen kolommen */
.container .row > div {
    margin-bottom: 30px;    /* Meer ruimte tussen kolommen */
}

/* Titel in kaarten */
.card-title {
    color: #009cab; /* blauwe kleur voor kaarttitels bv= linkedln */
}

/* Responsieve aanpassingen voor schermen kleiner dan 768px */
@media (max-width: 768px) {
    .container {
        padding: 15px;   /* Meer padding rond inhoud op mobiel */
    }
    
    .row > div {
        margin-bottom: 20px;  /* Ruimte onder kolommen op mobiel */
    }
}

/* Footer styling */
footer {
    background-color: #333;   /* Donkergrijze achtergrond voor footer */
    color: white;      /* Witte tekstkleur in footer */
    padding: 30px 0;     /* Verticale padding van 30px, horizontaal 0 */
    margin-top: 40px;    /* Ruimte van 40px boven de footer */
}

/* Links in footer */
footer a {
    color: white;      /* Witte kleur voor links in footer */
    text-decoration: none;   /* Verwijder onderstreping van links */
}

/* Links in footer bij hover */
footer a:hover {
    color: #f04c25;  /* Oranje kleur wanneer muis over link */
}